<template>
	<view class="container">
		<!-- <u-tabs class="tabs-fixed" :list="tabsList" :current="tabsCurrent" @change="tabsChange" :is-scroll="false" font-size="28" bar-height="6" bar-width="170" active-color="#6D4BBE"></u-tabs> -->
		<!-- mescroll-body start -->
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="audit-list" v-for="(item,index) in dataList" :key="index">
				<view class="audit-list__head">
					<image class="avatar" :src="item.course.teacher.avatar" mode="aspectFill"></image>
					<view class="content">
						<view class="title">{{ item.course.name }}</view>
						<view>学员：{{ item.user.nickname }}</view>
						<view>教练：{{ item.teacher.name }}</view>
						<view>原约时间：{{item.date_text}} {{item.start_time +'-'+ item.end_time }}</view>
						<view>更改时间：{{ item.change_time_text }}</view>
					</view>
				</view>
				<view class="audit-list__foot">
					<u-button @click="refuse(item.id)" v-if="item.check_status==2" type="default" size="mini" shape="circle" :custom-style="{width:'140rpx',marginLeft:'24rpx',color:'#6D4BBE'}">拒绝</u-button>
					<u-button @click="agree(item.id)" v-if="item.check_status==2" type="default" size="mini" shape="circle" :custom-style="{width:'140rpx',marginLeft:'24rpx',color:'#fff',background:'linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%)'}">通过</u-button>
					<text class="col-1" v-if="item.check_status==3">审核已通过</text>
					<text class="col-2" v-if="item.check_status==4">已拒绝</text>
				</view>
			</view>
		</mescroll-body>
		<!-- mescroll-body end -->
		<!-- 底部导航栏 start -->
		<wd-tabbar class="wd-tabbar" iconSize="44" :list="wd_tabbar_manage" :isTabBar="false"></wd-tabbar>
		<!-- 底部导航栏 end -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabsList: [
					{ id: 0, name: '课程调剂' },
					{ id: 1, name: '老师补卡申请' },
				],
				tabsCurrent: 0,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '../../../../static/images/icon_empty-class.png',
						tip: '当天暂无排课，请点击右下角按钮排课'
					}
				},
				dataList: [
					// {
					// 	avatar: '../../../static/images/img_product_swiper.png',
					// 	title: '瑜伽私教',
					// 	student: '晓丹',
					// 	teacher: '瑶瑶老师',
					// 	oldTime: '2021.6.10（周一）10:00～12:00',
					// 	newTime: '2021.6.11（周二）19:00～20:00',
					// 	status: 0
					// },
					// {
					// 	avatar: '../../../static/images/img_product_swiper.png',
					// 	title: '瑜伽私教',
					// 	student: '晓丹',
					// 	teacher: '瑶瑶老师',
					// 	oldTime: '2021.6.10（周一）10:00～12:00',
					// 	newTime: '2021.6.11（周二）19:00～20:00',
					// 	status: 1
					// },
					// {
					// 	avatar: '../../../static/images/img_product_swiper.png',
					// 	title: '瑜伽私教',
					// 	student: '晓丹',
					// 	teacher: '瑶瑶老师',
					// 	oldTime: '2021.6.10（周一）10:00～12:00',
					// 	newTime: '2021.6.11（周二）19:00～20:00',
					// 	status: 2
					// }
				]
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.tabsCurrent = index;
				this.mescroll.resetUpScroll()
			},
			/*下拉刷新的回调, 有3种处理方式:*/
			downCallback() {
				setTimeout(()=>{
					this.mescroll.resetUpScroll()
				},2000)
			},
			/*上拉加载的回调*/
			upCallback(page) {
				var that = this;
				let postData = {
				    page: page.num, // 页码, 默认从1开始
				    limit: page.size, // 每页数据条数
				};
				var option = {
					tip_status: false,
					method: 'POST',
					tips: 'loading',
					url: 'api/course/arrangement_check_list',
					data: postData
				};
				//联网加载数据
				http.common_request(that,option,function(data){
					if (data.code==1) {
						if(page.num == 1) that.dataList = []; //如果是第一页需手动制空列表
						that.dataList = that.dataList.concat(data.data.data); //追加新数据
						//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						that.mescroll.endSuccess(data.data.data.length);
					} else{
						//联网失败, 结束加载
						that.mescroll.endErr();
					}
				})
			},
			
			//拒绝
			refuse(id){
				var that = this;
				var option = {
					tip_status: true,
					method: 'POST',
					tips: 'loading',
					url: 'api/course/arrangement_refuse',
					data: {arrangement_id: id}
				};
				//联网加载数据
				http.common_request(that,option,function(data){
					if (data.code==1) {
						http.toast(data.msg);
						that.downCallback()
					} 
				})
			},
			
			//通过
			agree(id){
				var that = this;
				var option = {
					tip_status: true,
					method: 'POST',
					tips: 'loading',
					url: 'api/course/arrangement_agree',
					data: {arrangement_id: id}
				};
				//联网加载数据
				http.common_request(that,option,function(data){
					if (data.code==1) {
						http.toast(data.msg);
						that.downCallback()
					} 
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #F6F6F6;
	}
	.tabs-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		/deep/ .u-tabs {
			border-radius: 0 0 24rpx 24rpx;
			overflow: hidden;
		}
	}
	.audit-list {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		&__head {
			display: flex;
			padding: 24rpx;
			.avatar {
				display: block;
				margin-right: 40rpx;
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
			}
			.content {
				flex: 1;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #333333;
				overflow: hidden;
			}
			.title {
				margin-bottom: 5rpx;
				line-height: 48rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
			}
		}
		&__foot {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			border-top: 1rpx #EDEDED solid;
			padding: 24rpx;
			text {
				line-height: 50rpx;
				font-size: 24rpx;
				&.col-1 {
					color: #6D4BBE;
				}
				&.col-2 {
					color: #EB0000;
				}
			}
		}
	}
</style>